// [DELETE]feature-t1-1.8.3-privilege
import React from 'react';
import { Card, Popover, Icon, message } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { eventTrack } from '@/utils/track';
import AuthBox from './AuthBox';
import { getAuthData } from '../services';

const filterTree = tree =>
    tree.map(({ children, ...props }) => {
        if (children && children.length > 0) {
            return { children: filterTree(children), ...props };
        }
        return { children: '', ...props };
    });

const Authorization = () => {
    const [loading, setLoading] = React.useState(false);
    const [webList, setWebList] = React.useState([]);
    const [desktopList, setDesktopList] = React.useState([]);
    const [appList, setAppList] = React.useState([]);
    const [nowType, setNowType] = React.useState('all');

    const getTree = async (params, type) => {
        setNowType(type);
        setLoading(true);
        const res = await getAuthData({ ...params, showDutyFlag: 1 });
        const { data, code, msg } = res;
        if (code === 10000) {
            // console.log(data);
            if (type === 0) {
                setWebList(filterTree((data && data.webList) || []));
            } else if (type === 1) {
                setAppList(filterTree((data && data.appList) || []));
            } else if (type === 2) {
                setDesktopList(filterTree((data && data.desktopList) || []));
            } else {
                setWebList(filterTree((data && data.webList) || []));
                setDesktopList(filterTree((data && data.desktopList) || []));
                setAppList(filterTree((data && data.appList) || []));
            }
        } else {
            message.error(msg);
        }
        setLoading(false);
    };

    React.useEffect(() => {
        getTree({}, 'all');
    }, []);

    React.useEffect(() => {
        eventTrack({
            eventName: 'personnel_management_organization_authorization_click',
            pageName: 'personnel_management_organization'
        });
    }, []);
    const content = (
        <div>
            <div style={{ color: '#333' }}>类型</div>
            <div>菜单：是指通往页面和按钮的路径，不具备单独的权限；</div>
            <div>页面：用于网站信息组织和承载，起到信息传达作用；</div>
            <div>按钮：是指提供给用户的最小粒度的权限点。</div>
            <div style={{ color: '#333' }}>等级</div>
            <div>基础：为用户进行系统后默认拥有的功能；</div>
            <div>职能：为专门提供给职能部门的专业功能；</div>
            <div>高级：为只开放给管理人员的敏感功能。</div>
        </div>
    );
    const title = (
        <>
            功能权限
            <Popover content={content} title="名词释义" placement="right">
                <Icon type="info-circle" theme="filled" style={{ color: '#CACACA', marginLeft: 8 }} />
            </Popover>
        </>
    );

    return (
        <PageHeaderWrapper>
            <Card title={title} bordered={false}>
                <AuthBox
                    terminalType={0}
                    loading={loading && (nowType === 'all' || nowType === 0)}
                    dataSource={webList}
                    onOk={getTree}
                />
                <AuthBox
                    terminalType={1}
                    loading={loading && (nowType === 'all' || nowType === 1)}
                    dataSource={appList}
                    onOk={getTree}
                />
                <AuthBox
                    terminalType={2}
                    loading={loading && (nowType === 'all' || nowType === 2)}
                    dataSource={desktopList}
                    onOk={getTree}
                />
            </Card>
        </PageHeaderWrapper>
    );
};

export default Authorization;
